<template>
    <div>
        <!-- 自定义弹窗 -->
        <div v-if="visible" class="custom-dialog">
            <div class="dialog-backdrop" @click="closeDialog"></div>
            <!-- 点击背景关闭弹窗 -->

            <div class="dialog-container">
                <div class="dialog-header">
                    <!-- 弹窗标题插槽或默认标题 -->
                    <slot name="header">
                        <h3 class="dialog-title">{{ title }}</h3>
                        <!-- 默认标题 -->
                    </slot>
                    <!-- 右上关闭按钮 -->
                    <div class="buttons">
                        <img src="../assets/img/module5/dialog/guanbi.png" @click="closeDialog" alt="关闭"
                            class="button-icon" />
                    </div>
                </div>

                <div class="dialog-content">
                    <div class="contentWapper">
                        <span class="dialogText">发布对象</span>
                        <el-select v-model="localSelectUser" multiple filterable placeholder="选择用户" @change="handleChange">
                            <el-option v-for="(user, index) in users" :key="index" :label="user.name"
                                :value="user.id">
                            </el-option>
                        </el-select>


                        <!-- <select v-model="selectUser">
                            <option class="selectUser" value="">选择用户</option>
                            <option v-for="(user, index) in users" :key="index" :value="user.id">
                                {{ user.name }}
                            </option>
                        </select>
                        <img src="../assets/img/module5/dialog/iconPlus.png" alt="图片加载失败" class="plusIcon"> -->
                    </div>
                    <div class="buttonWapper">
                        <button class="diaButton" @click="cancelDia">取消</button>
                        <button class="diaButton" @click="confirmDia">确定</button>
                    </div>
                </div>

                <div class="dialog-footer">
                    <img src="../assets/img/module5/dialog/dialogicon3.png" alt="图片加载失败" class="img-foot" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        selectUser:{
            type: Array,
            default: () => [], // 默认选择用户
        },
        users: {
            type: Array,
            default:() => [
            { id: "1", name: '用户1' },
            { id: "2", name: '用户2' },
            { id: "3", name: '用户3' } // 示例用户列表
        ]},


        visible: {
            type: Boolean,
            required: true,
        },
        title: {
            type: String,
            default: "空域使用说明20240823", // 弹窗默认标题
        },
        closeButtonText: {
            type: String,
            default: "关闭", // 关闭按钮默认文本
        },
    },

    data() {
        return {
            localSelectUser: this.selectUser, // 初始化为传入的值
        };
    },

    methods: {
        closeDialog() {
            this.$emit("update:visible", false); // 通知父组件关闭弹窗
        },

        handleChange(value){
            console.log("多选更新",value);
            console.log("多选更新",this.localSelectUser);

        },

        cancelDia() {
            console.log("取消被点击了");
        },

        confirmDia() {
            console.log("确定被点击了");
        },

    },
};
</script>

<style scoped>
/* 弹窗背景 */
.custom-dialog {
    position: fixed;
    top: 50%;
    left:50%;
    width: 35vw;
    height: 40vh;
    transform: translate(-50%, -50%); /* 精确居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}


/* 弹窗容器 */
.dialog-container {
    position: relative;
    width: 100%;
    /* 弹窗宽度 */
    height: 100%;
    background-image:url("../assets/img/module5/dialog/container.png") ;
    /* 背景图片 */
    background-size: cover;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 弹窗顶部标题和按钮 */
.dialog-header {
    display: flex;
    width: 100%;
    height: 10%;
    justify-content: center;
    align-items: center;
    position: relative;
    background-image: url("../assets/img/module5/dialog/headbar.png"),url("../assets/img/module5/dialog/dialogtopimg1.png"),url("../assets/img/module5/dialog/dialogtopimg2.png");
    background-position: center,center,center;
    background-size: cover,auto,cover;
    background-repeat: no-repeat,no-repeat,no-repeat;
}

.dialog-title {
    display: flex;
    font-size: 1.5rem;
    color: #ffffff;
    text-align: center;
    margin: 0;
}

/*右上角关闭按钮*/
.buttons {
    position:absolute;
    right: 2%;
}

.button-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* 弹窗内容区 */
.dialog-content {
    width: 100%;
    height: 80%;
    display: flex;
    flex-wrap: wrap;/**允许内容换行*/
    align-content: end;
    justify-content: center;
}
.contentWapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20%;
    gap:1%;
}

.dialogText{
    font-size: 0.93vw;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    color: #749fbf;
    text-align: center;
    margin-right: 2%;
}

select {
    border: 2px solid #1d405c;
    color: #ffffff;
    font-size:16px;
    border-radius: 4px;
    padding-left: 1%;
    width: 10vw;
    height: 4vh;
    background-color: #0d141b;

}

.selectUser {
    color: #ffffff;
    background-color: #0d141b;

}

.plusIcon{
    height: 40%;
    margin-left:1%;
}

.buttonWapper{
    display: flex;
    width: 100%;
    height: 10%;
    flex-flow: row;
    margin-top: 20%;
    margin-left:30%;
    gap:10%;
}

.diaButton{
    width: 25%;
    height: 100%;
    border: none;
    color: #ffffff;
    font-size: 20px;
    background-color: transparent;
    background-image: url("../assets/img/module5/dialog/dialogbutton.png"),url("../assets/img/module5/dialog/buttonStrip.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.diaButton:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* 悬停时的背景颜色 */
    transform: scale(1.05);
    /* 悬停时轻微放大 */
    cursor: pointer;
    /* 悬停时显示手型光标 */
}

/* 弹窗底部 */
.dialog-footer {
    display: flex;
    height: 10%;
    width: 100%;
    /* justify-content: flex-end; */
    position: relative;
}

/*右下角标识*/
.img-foot{
    position: absolute;
    right: 2%;
}
/*
.contentWapper /deep/ .el-select{
    border: 2px solid #1d405c;
    color: #ffffff;
    background-color: #0d141b;
}*/

/*选择用户输入框颜色*/

.contentWapper /deep/ .el-input--medium .el-input__inner{
    border: 2px solid #1d405c;
    color: #ffffff;
    background-color: #0d141b;
}

.contentWapper /deep/ .el-select-dropdown{
    border:none;
    background: #0d141b;
}

.contentWapper /deep/ .el-select-dropdown__item {
    background-color: transparent;
    color: #fff;
}

.contentWapper /deep/ .el-tag.el-tag--info{
    border:none;
    background-color: #1d405c;
    color: #fff;
}

</style>
